<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>微信登录</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
  <link rel="stylesheet" href="css/login.css">
</head>
<body>
  <div class="login-container">
    <div class="logo">
      <i class="fab fa-weixin"></i>
    </div>
    <h2>微信登录</h2>
    <form id="loginForm">
      <div class="input-group">
        <i class="fas fa-user"></i>
        <label for="username"></label><input type="text" id="username" placeholder="请输入用户名" required>
      </div>
      <div class="input-group">
        <i class="fas fa-lock"></i>
        <label for="password"></label><input type="password" id="password" placeholder="请输入密码" required>
      </div>
      <div class="input-group">
        <div class="captcha-container">
          <label for="inputCaptcha"></label><input type="text" id="inputCaptcha" class="captcha-input" placeholder="输入验证码">
          <img id="verificationCodeImg" src="/captcha/get" class="captcha-img" title="看不清？换一张" alt="验证码">
        </div>
      </div>
      <div class="agreement">
        <input type="checkbox" id="agreeCheck" checked>
        <label for="agreeCheck">我已阅读并同意<a href="#">《服务条款》</a>和<a href="#">《隐私政策》</a></label>
      </div>
      <button type="submit" class="login-btn" onclick="login()">登录</button>
    </form>
    <div class="footer">
      <p>版权所有 ©九转苍翎</p>
    </div>
  </div>
  <!-- 引入jQuery依赖 -->
  <script src="js/jquery.min.js"></script>
  <script>
    //刷新验证码
    $("#verificationCodeImg").click(function(){
      //new Date().getTime()).fadeIn()防止前端缓存
      $(this).hide().attr('src', '/captcha/get?dt=' + new Date().getTime()).fadeIn();
    });
    //登录
    function login() {
      $.ajax({
        url: '/user/login',
        type: "post",
        data:{
          userName:$('#username').val(),
          password:$('#password').val(),
          captcha:$('#inputCaptcha').val(),
        },
        success: function(result) {
          console.log(result);
          if (result.code === "SUCCESS") {
            alert(result.data);
            location.href="/home.html";
          }else {
            alert(result.error);
          }
        },
      })
    }
  </script>
</body>
</html>
